<template>
  <div class="index">
    <div class="title flex between">
      <div @click="toReload()">安义涂表嫂电商营销数据看板</div>
      <div class="time">
        <!-- {{ timeInfo }} -->
        <el-date-picker
          @change="changeDate"
          v-model="value1"
          type="date"
          placeholder="选择日期"
        >
        </el-date-picker>
      </div>
    </div>
    <div class="main flex between">
      <div class="left">
        <div class="left-nav flex align between wrap">
          <!-- :class="
              itemAct == 1
                ? 'itemAct1'
                : itemAct == 2
                ? 'itemAct2'
                : itemAct == 3
                ? 'itemAct3'
                : itemAct == 4
                ? 'itemAct4'
                : itemAct == 5
                ? 'itemAct5'
                : itemAct == 6
                ? 'itemAct6'
                : ''
            " -->
          <div
            class="nav-item"
            :class="itemAct == item.id ? item.className : ''"
            v-for="(item, index) in list"
            @click="toActName(item)"
            :key="index"
          >
            <div class="item-tit flex align between">
              <div class="item-tit-l flex align">
                <span :style="'background:' + item.color"></span>{{ item.tit }}
              </div>
              <div class="item-tit-r flex align" v-if="item.per != ''">
                <img :src="item.icon2" />
                <span>{{ item.per }}</span>
              </div>
            </div>
            <div class="item-nums flex align">
              <img :src="item.icon" />
              <div>{{ item.num }}</div>
            </div>
          </div>
        </div>
        <div class="left-chart">
          <div class="titLe flex align"><span></span>{{ actItem.tit }}趋势</div>
          <div class="data-sel flex align between">
            <div
              @click="toSel(1)"
              :class="data_type == 1 ? 'data-sel-act' : ''"
            >
              近7日
            </div>
            <div
              @click="toSel(2)"
              :class="data_type == 2 ? 'data-sel-act' : ''"
            >
              近30日
            </div>
          </div>
          <el-row class="chart1" id="chart1"></el-row>
        </div>
        <div class="flex align between dataDiv">
          <div class="dataDiv_le">
            <div class="titLe flex align"><span></span>流量来源</div>
            <div class="dataDiv_le_con">
              <div class="con_tit flex align between">
                <div>渠道信息</div>
                <div>曝光人数</div>
                <div>点击人数</div>
              </div>
              <div
                class="con_main flex align between"
                v-for="(item, index) in channel"
                :key="index"
              >
                <div>{{ item.channel_name }}</div>
                <div class="flex align">
                  {{ item.exposure_quantity }}
                  <!-- <img src="@/assets/img/up.png" />
                  <span>12.4%</span> -->
                </div>
                <div class="flex align">
                  {{ item.scan_quantity }}
                  <!-- <img src="@/assets/img/up.png" />
                  <span>12.4%</span> -->
                </div>
              </div>
              <!-- <div class="con_main flex align between">
                <div>合作达人</div>
                <div class="flex align">
                  722
                  <img src="@/assets/img/bto.png" />
                  <span style="color: #12ab68">12.4%</span>
                </div>
                <div class="flex align">
                  1563
                  <img src="@/assets/img/bto.png" />
                  <span style="color: #12ab68">12.4%</span>
                </div>
              </div> -->
            </div>
          </div>
          <div class="dataDiv_ri">
            <div class="titLe flex align"><span></span>短视频数据</div>
            <div class="dataDiv_ri_con flex align between wrap">
              <div class="con_item" v-for="(item, index) in list2" :key="index">
                <div class="con_item_tit">{{ item.tit }}</div>
                <div class="con_item_price" v-if="item.nums != '￥null'">
                  {{ item.nums }}
                </div>
                <div class="flex align" v-if="item.pre != null">
                  环比
                  <img src="@/assets/img/up.png" />
                  <span>{{ item.pre }}</span>
                </div>
                <div class="flex align" v-if="item.biao != null">
                  标杆
                  <span class="item_price">{{ item.biao }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="right_item1">
          <div class="titLe flex align"><span></span>产品销量排行榜</div>
          <div class="right_item1_con" v-if="products.length != 0">
            <div class="flex align between right_item1_tit">
              <div>商品信息</div>
              <div>用户支付金额</div>
              <div>成交订单数</div>
            </div>
            <vue3-seamless-scroll
              :list="products"
              :hover="true"
              class="seamless-warp scroll"
              direction="down"
              :step="0.2"
            >
              <div
                class="list-item flex align between"
                v-for="(item, index) in products"
                @click="toInfo(item.id)"
                :key="index"
              >
                <div>{{ item.product_name }}</div>
                <div>￥{{ item.user_pay_amount }}</div>
                <div>{{ item.deal_order_quantity }}</div>
              </div>
            </vue3-seamless-scroll>
          </div>
          <div class="zan" v-else>暂无数据</div>
        </div>
        <div class="right_item2">
          <div class="titLe flex align"><span></span>交易构成</div>
          <div class="item2_con" v-if="trades.length != 0">
            <div class="flex align between navs">
              <div>交易</div>
              <div>用户支付金额</div>
            </div>
            <el-row class="chart2" id="chart2"></el-row>
          </div>
          <div class="zan" v-else>暂无数据</div>
        </div>
        <div class="right_item2 right_item3">
          <div class="titLe flex align"><span></span>直播数据</div>
          <vue3-seamless-scroll
            v-if="lives.length != 0"
            :list="lives"
            :hover="true"
            class="seamless-warp scroll"
            direction="down"
            :step="0.2"
          >
            <div
              class="item3_item flex"
              v-for="(item, index) in lives"
              :key="index"
            >
              <img src="@/assets/img/icon.png" />
              <div class="item3_item_con">
                <div class="item3_item_con_name">{{ item.live_name }}</div>
                <div class="item3_item_con_time">
                  开播时间：{{ item.live_start_time }} —
                  {{ item.live_end_time }}
                </div>
                <div class="flex align between nums">
                  <div class="nums-item">
                    <div>直播间用户支付金额</div>
                    <div>￥{{ item.live_user_amount }}</div>
                  </div>
                  <div class="nums-item">
                    <div>观看人次</div>
                    <div>{{ item.live_scan_count }}</div>
                  </div>
                  <div class="nums-item">
                    <div>千次观看用户金额</div>
                    <div>￥{{ item.live_thousand_amount }}</div>
                  </div>
                </div>
              </div>
            </div>
          </vue3-seamless-scroll>
          <div class="zan" v-else>暂无数据</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { Vue3SeamlessScroll } from "vue3-seamless-scroll";
import { business } from "@/api/apiData";
export default {
  components: { Vue3SeamlessScroll },
  data() {
    return {
      itemAct: 1,
      list: [
        {
          id: 1,
          tit: "用户支付金额",
          per: "",
          num: "",
          icon: require("@/assets/img/icon1.png"),
          icon2: require("@/assets/img/up.png"),
          color: "#9E76F6",
          shadow: "rgba(201, 177, 255, 0.34)",
          className: "itemAct1",
          color2: "#DFD1FF",
          name: "user_pay_amount",
        },
        {
          id: 2,
          tit: "实际免除佣金",
          per: "",
          num: "",
          icon: require("@/assets/img/icon2.png"),
          icon2: require("@/assets/img/up.png"),
          color: "#3CD0A4",
          shadow: "rgba(60, 208, 164, 0.34)",
          className: "itemAct2",
          color2: "#D7FBF0",
          name: "exempt_commission",
        },
        {
          id: 3,
          tit: "成交订单数",
          per: "",
          num: "",
          icon: require("@/assets/img/icon3.png"),
          icon2: require("@/assets/img/bto.png"),
          color: "#24CEE9",
          shadow: "rgba(36, 206, 233, 0.34)",
          className: "itemAct3",
          color2: "#B4EFFC",
          name: "deal_order_quantity",
        },
        {
          id: 4,
          tit: "曝光人数",
          per: "",
          num: "",
          icon: require("@/assets/img/icon4.png"),
          icon2: require("@/assets/img/up.png"),
          color: "#DC2B2B",
          shadow: "rgba(220, 43, 43, 0.34)",
          className: "itemAct4",
          color2: "#F8C9CA",
          name: "exposure_quantity",
        },
        {
          id: 5,
          tit: "点击人数",
          per: "",
          num: "",
          icon: require("@/assets/img/icon5.png"),
          icon2: require("@/assets/img/up.png"),
          color: "#FF9524",
          shadow: "rgba(255, 149, 36, 0.34)",
          className: "itemAct5",
          color2: "#FFE6CB",
          name: "scan_quantity",
        },
        {
          id: 6,
          tit: "成交人数",
          per: "",
          num: "",
          icon: require("@/assets/img/icon6.png"),
          icon2: require("@/assets/img/bto.png"),
          color: "#FEC218",
          shadow: "rgba(254, 194, 24, 0.34)",
          className: "itemAct6",
          color2: "#FFFAEC",
          name: "deal_quantity",
        },
      ],
      list2: [
        {
          tit: "用户支付金额",
          nums: "",
          pre: "",
          biao: "",
        },
        {
          tit: "成交订单数",
          nums: "",
          pre: "",
          biao: "",
        },
        {
          tit: "商品曝光次数",
          nums: "",
          pre: "",
          biao: "",
        },
        {
          tit: "引流直播间用户",
          nums: "",
          pre: "",
          biao: "",
        },
        {
          tit: "看后搜用户支付",
          nums: "",
          pre: "",
          biao: "",
        },
        {
          tit: "引流店铺页用户",
          nums: "",
          pre: "",
          biao: "",
        },
      ],
      timeInfo: "",
      actItem: {
        id: 1,
        tit: "用户支付金额",
        per: "",
        num: "",
        icon: require("@/assets/img/icon1.png"),
        icon2: require("@/assets/img/up.png"),
        color: "#9E76F6",
        shadow: "rgba(201, 177, 255, 0.34)",
        className: "itemAct1",
        color2: "#DFD1FF",
      },
      main_data: "",
      products: [],
      trades: [],
      lives: [],
      channel: [],
      trade_id: 1,
      timeInfo2: "",
      column_name: "user_pay_amount",
      data_type: 1,
      value1: new Date(),
    };
  },
  mounted() {
    this.getDate();
    this.getData();
    this.getBusiness();
    this.getChatData();
  },
  methods: {
    toReload(){
      location.reload()
    },
    changeDate(e) {
      let data = this.formatTimeStamp(e);
      this.timeInfo2 = data;
      // console.log(data)
      this.getData();
      this.getChatData();
    },
    toSel(e) {
      this.data_type = e;
      this.getChatData();
    },
    getData() {
      business.mainData({ data_date: this.timeInfo2 }).then((res) => {
        if (res.code == 1) {
          this.main_data = res.data.main_data;
          this.list[0].num =
            "￥" + res.data.main_data.user_pay_amount / 10000 + "万";
          this.list[1].num = res.data.main_data.exempt_commission;
          this.list[2].num = res.data.main_data.deal_order_quantity;
          this.list[3].num = res.data.main_data.exposure_quantity;
          this.list[4].num = res.data.main_data.scan_quantity;
          this.list[5].num = res.data.main_data.deal_quantity;
          this.list2[0].nums = "￥" + res.data.main_data.sv_user_pay_amount;
          this.list2[0].biao = res.data.main_data.sv_amount_benchmark;
          this.list2[0].pre = res.data.main_data.sv_amount_circel_rate;
          this.list2[1].nums = res.data.main_data.sv_deal_order_quantity;
          this.list2[1].biao = res.data.main_data.sv_order_benchmark;
          this.list2[1].pre = res.data.main_data.sv_order_circel_rate;
          this.list2[2].nums = res.data.main_data.sv_exposure_quantity;
          this.list2[2].biao = res.data.main_data.sv_exposure_benchmark;
          this.list2[2].pre = res.data.main_data.sv_exposure_circel_rate;
          this.list2[3].nums = res.data.main_data.sv_live_user_quantity;
          this.list2[3].biao = res.data.main_data.sv_live_benchmark;
          this.list2[3].pre = res.data.main_data.sv_live_circel_rate;
          this.list2[4].nums = "￥" + res.data.main_data.khs_user_pay_amount;
          this.list2[4].biao = res.data.main_data.khs_benchmark;
          this.list2[4].pre = res.data.main_data.khs_circel_rate;
          this.list2[5].nums = res.data.main_data.store_detail_user_quantity;
          this.list2[5].biao = res.data.main_data.store_benchmark;
          this.list2[5].pre = res.data.main_data.store_circel_rate;
          this.products = res.data.products;
          let trades = res.data.trades;
          this.trades = trades;
          if (trades.length != 0) {
            let tradesList1 = [];
            let tradesList2 = [];
            trades.forEach((item) => {
              tradesList1.push(item.user_pay_amount);
              tradesList2.push(item.trade_name);
            });
            setTimeout(()=>{
            this.getChart2(tradesList1, tradesList2);

            },500)
          }

          this.lives = res.data.lives;
        }
      });
    },
    getBusiness() {
      business.channelData({ trade_id: this.trade_id }).then((res) => {
        this.channel = res.data.channel;
      });
    },
    getChatData() {
      let obj = {
        data_date: this.timeInfo2,
        column_name: this.column_name,
        data_type: this.data_type,
      };
      business.chatData(obj).then((res) => {
        if (res.code == 1) {
          let datas = res.data.chat_data.x;
          let arr = [];
          datas.forEach((item) => {
            arr.push(this.formatTimeStamp(item * 1000));
          });
          this.getChart1(res.data.chat_data.y, arr);
        }
      });
    },
    getRandom() {
      var min = 1;
      var max = 150;
      var randomInt = Math.floor(Math.random() * (max - min + 1)) + min;
      return randomInt;
    },
    toActName(item) {
      this.itemAct = item.id;
      this.actItem = item;
      this.column_name = item.name;
      this.getChatData();
      this.getChart1();
    },
    getDate() {
      const now = new Date();
      const year = now.getFullYear(); // 获取当前年份
      const month = now.getMonth() + 1; // 获取当前月份，注意getMonth()返回的是0-11，所以需要加1
      const day = now.getDate(); // 获取当前日期
      let timeInfo = year + "年" + month + "月" + day + "日";
      let timeInfo2 = year + "-" + month + "-" + day;
      this.timeInfo = timeInfo;
      this.timeInfo2 = timeInfo2;
    },
    formatTimeStamp(timeStamp) {
      let date = new Date(timeStamp);
      let year = date.getFullYear();
      let month = date.getMonth() + 1;
      let day = date.getDate();
      month = month < 10 ? "0" + month : month;
      day = day < 10 ? "0" + day : day;
      return `${year}-${month}-${day}`;
    },

    getChart1(data1, data2) {
      // let data1 = [
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      //   this.getRandom(),
      // ];
      // let data2 = ["9/18", "9/19", "9/20", "9/21", "9/22", "9/23", "9/24"];
      const that = this;
      let color1 = that.actItem.color;
      let color2 = that.actItem.color2;
      let myChart = this.$echarts.init(document.getElementById("chart1"));
      let option = {
        grid: {
          top: "10%", // 等价于 y: '16%'
          left: "0%",
          right: "0%",
          bottom: "0%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          data: data2,
          axisLabel: {
            show: true,
            color: "#1D1D1D",
            fontSize: 14,
          },
          type: "category",
        },
        yAxis: {
          splitLine: {
            show: true, // 显示分割线
            lineStyle: {
              color: "#BDD4E8", // 红色分割线
            },
          },
          axisLabel: {
            show: true,
            color: "#1D1D1D",
          },
          type: "value",
        },
        series: [
          {
            data: data1,
            type: "line",
            itemStyle: {
              // 设置拐点颜色
              color: color1, // 或者使用函数来为不同的数据点设置不同的颜色
            },
            lineStyle: {
              color: color1,
              width: "2",
            },
            areaStyle: {
              normal: {
                color: that.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: color1, // 折线底下区域渐变色
                  },
                  {
                    offset: 0.8,
                    color: color2, // 折线底下区域渐变色
                  },
                ]),
              },
            },
          },
        ],
      };
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.setOption(option);
    },
    getChart2(data, data2) {
      // var data = [7.96, 16.96, 18, 17.6, 17.4];
      var barWidth = 20;
      var maxNum = 0;
      for (var i = 0; i < data.length; i++) {
        // if (data[i] > maxNum) {
        maxNum += data[i];
        // }
      }
      const that = this;
      let myChart = this.$echarts.init(document.getElementById("chart2"));
      let option = {
        grid: {
          top: "5%",
          left: "8%",
          right: "12%",
          bottom: "0%",
        },
        xAxis: {
          show: false,
        },
        yAxis: {
          data: data2,
          splitLine: {
            show: false,
          },
          axisLabel: {
            textStyle: { fontSize: "80%", color: "#1D1D1D" },
          },
          axisLine: {
            show: false,
          },
          axisTick: false,
        },
        series: [
          {
            type: "bar",
            barWidth: barWidth,
            zlevel: 2,
            data: data.map(function (item) {
              return {
                value: item,
                maxNum: maxNum,
              };
            }),
            label: {
              show: true,
              position: "inside",
              // distance: 80,
              align: "center",
              formatter: function (params) {
                // return params.data.realValue;
                var percent =
                  Number(
                    (params.data.value / params.data.maxNum) * 100
                  ).toFixed(2) + "%";
                return percent;
              },
              color: "#fff",
              fontSize: 12,
            },
            itemStyle: {
              borderRadius: 10,
              color: that.$echarts.graphic.LinearGradient(0, 1, 1, 1, [
                { offset: 0, color: "#395CFE" },
                { offset: 1, color: "#2EC7CF" },
              ]),
            },
          },
          {
            type: "bar",
            barWidth: barWidth,
            barGap: "-100%",
            data: data.map(function (item) {
              return {
                realValue: item,
                value: maxNum,
              };
            }),
            label: {
              show: true,
              position: "right",
              distance: 90,
              align: "right",
              formatter: function (params) {
                return "￥" + params.data.realValue;
              },
              color: "#1D1D1D",
              fontSize: 18,
            },
            itemStyle: {
              borderRadius: 10,
              color: "#F3F3F3",
            },
          },
        ],
      };
      window.addEventListener("resize", function () {
        myChart.resize();
      });
      myChart.on("click", function (params) {
        // 控制台打印数据的名称
        console.log(params);
        that.trade_id = that.trades[params.seriesIndex].id;
        that.getBusiness();
      });
      myChart.setOption(option);
    },
  },
};
</script>
<style lang="less" scoped>
.title {
  background: #2269fc;
  padding: 21px 24px;
  color: white;
  font-size: 32px;
  .time {
    font-size: 28px;
  }
}
.main {
  padding: 24px;
  .titLe {
    font-size: 20px;
    span {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      display: block;
      margin-right: 8px;
      background: #2269fc;
    }
  }
  .left {
    width: 1076px;
    .itemAct1 {
      box-shadow: 1px 1px 8px 1px rgba(158, 118, 246, 0.34);
    }
    .itemAct2 {
      box-shadow: 1px 1px 8px 1px rgba(60, 208, 164, 0.34);
    }
    .itemAct3 {
      box-shadow: 1px 1px 8px 1px rgba(31, 205, 233, 0.34);
    }
    .itemAct4 {
      box-shadow: 1px 1px 8px 1px rgba(220, 43, 43, 0.34);
    }
    .itemAct5 {
      box-shadow: 1px 1px 8px 1px rgba(255, 149, 36, 0.34);
    }
    .itemAct6 {
      box-shadow: 1px 1px 8px 1px rgba(254, 194, 24, 0.34);
    }
    .nav-item {
      width: 348px;
      height: 144px;
      background: #ffffff;
      border-radius: 8px;
      margin-bottom: 16px;
      .item-tit {
        padding: 12px 16px;
        .item-tit-l {
          font-size: 20px;
          span {
            width: 8px;
            height: 8px;
            border-radius: 50%;
            display: block;
            margin-right: 8px;
            background: #9e76f6;
          }
        }
        .item-tit-r {
          font-size: 18px;
          color: #d64344;
          img {
            width: 16px;
            margin-right: 8px;
          }
        }
      }
      .item-nums {
        padding: 0 25px;
        color: #1d1d1d;
        font-size: 32px;
        font-weight: bold;
        img {
          width: 75px;
          height: 75px;
        }
      }
    }
    .left-chart {
      height: 280px;
      background: white;
      padding: 12px 16px;
      border-radius: 8px;
      position: relative;
      .chart1 {
        width: 100%;
        height: 235px;
      }
      .data-sel {
        position: absolute;
        top: 16px;
        right: 16px;
        div {
          background: #f3f3f3;
          color: #707070;
          font-size: 16px;
          padding: 3px 5px;
          margin-left: 12px;
          border-radius: 4px;
          cursor: pointer;
        }
        .data-sel-act {
          background: #dbe7ff;
          color: #2269fc;
        }
      }
    }
    .dataDiv {
      margin-top: 16px;
      .titLe {
        padding: 12px 16px;
      }
      .dataDiv_le {
        width: 530px;
        height: 304px;
        border-radius: 8px;
        background: white;
        .dataDiv_le_con {
          padding: 0 32px;
          .con_tit {
            color: #707070;
            font-size: 18px;
            div {
              flex: 1;
            }
          }
          .con_main {
            margin-top: 12px;
            div {
              flex: 1;
            }
            img {
              width: 16px;
              margin: 0 5px;
            }
            span {
              color: #d64344;
            }
            div:nth-child(1) {
              color: #2269fc;
            }
          }
        }
      }
      .dataDiv_ri {
        width: 530px;
        height: 304px;
        background: white;
        border-radius: 8px;
        font-size: 12px;
        .dataDiv_ri_con {
          padding: 0 32px;
          .con_item {
            background: #f1f3fc;
            width: 123.33px;
            height: 89.5px;
            padding: 12px;
            margin-bottom: 12px;
            .con_item_tit {
              color: #707070;
              font-size: 14px;
              margin-bottom: 4px;
            }
            .con_item_price {
              font-size: 18px;
              margin-bottom: 4px;
            }
            .flex {
              color: #707070;
              img {
                width: 10px;
                margin: 0 8px;
              }
              .item_price {
                margin-left: 8px;
              }
            }
          }
        }
      }
    }
  }
  .right {
    width: 780px;
    .titLe {
      padding: 12px;
    }
    .right_item1 {
      background: white;
      height: 304px;
      border-radius: 8px;

      .right_item1_con {
        padding: 0 32px;
        .right_item1_tit {
          div {
            flex: 1;
            color: #707070;
            font-size: 18px;
          }
          div:nth-child(2) {
            text-align: center;
          }
          div:nth-child(3) {
            text-align: right;
          }
        }
        .seamless-warp {
          height: 200px;
          overflow: hidden;
          margin-top: 12px;
          .list-item {
            padding: 4px 0;
            div {
              flex: 1;
            }
            div:nth-child(2) {
              text-align: center;
            }
            div:nth-child(3) {
              text-align: right;
            }
          }
        }
      }
    }
    .right_item2 {
      background: white;
      height: 304px;
      border-radius: 8px;
      margin: 16px 0;
      .item2_con {
        padding: 0 32px;
        .navs {
          color: #707070;
          font-size: 18px;
        }
        .chart2 {
          height: 200px;
        }
      }
    }
    .right_item3 {
      .seamless-warp {
        height: 230px;
        overflow: hidden;
      }
      .item3_item {
        margin: 12px 24px;
        img {
          width: 64px;
          height: 64px;
        }
      }
      .item3_item_con {
        margin-left: 20px;
        width: 90%;
      }
      .item3_item_con_name {
        font-size: 24px;
      }
      .item3_item_con_time {
        color: #6d6d6d;
        font-size: 18px;
        margin-bottom: 10px;
      }
      .nums {
        background: #f1f3fc;
        border-radius: 4px;
        font-size: 24px;
        .nums-item {
          padding: 10px;
          .div:nth-child(1) {
            color: #6d6d6d;
            font-size: 18px;
          }
        }
      }
    }
  }
}
</style>